<template>
	<el-card shadow="always">
		<!-- 
		tree-props 修改默认树形表格的取值属性名称
		hasChildren 用于在渲染时判断是否在当前行中需要构成树形数据结构
		三方：vue-table-with-tree-grid
		-->
		<zk-table border show-index index-text="序号" 
			:expand-type="false"
			:selection-type="false"
			:data="rights" 
			:columns="columns"
		>
			<template v-slot:level="{ row }">
				<el-tag v-if="row.pid==0" type="" effect="dark" size="mini">一级</el-tag>
					<el-tag v-else-if="(row.pid+'').split(',').length==1" type="success" effect="dark" size="mini">二级</el-tag>
					<el-tag v-else type="warning" effect="dark" size="mini">三级</el-tag>
			</template>
		</zk-table>
	</el-card>
</template>
<script>
import ZkTable from 'vue-table-with-tree-grid'
import {
	getAllRights
} from '@/api/rights.js'
export default {
	components:{
		ZkTable 
	},
	props:["h"],
	data() {
		return {
			isLoading:false,
			rights:[],
			columns:[
				{
					label: '权限名称',
					prop: 'authName',
				},
				{
					label: '权限等级',
					width: '160px',
					type: 'template',
					template:"level"
				},
				{
					label: '路径',
					prop: 'path',
				}
			]
		}
	},
	methods:{
		async loadAllRights(){
			// let roles = await getAllRights("list");
			let roles = await getAllRights("tree");
			if(!roles) return;
			this.rights = roles;
		}
	},
	created(){
		this.loadAllRights();
	}
}
</script>